<template>
  <div class="remen" @scroll="gun" ref="gunju">

      <van-swipe @change="onChange" class="my-swipe" :autoplay="4000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in banner" :key="index">
          <span>{{item.model.title}}</span>
          <img :src="item.model.cover" alt="">
          </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}&nbsp;<span>/{{bannerlenght}}</span></div>
        </template>
      </van-swipe>
      
    <div class="booktitle">
      <div class="text" v-for="(item, index) in rementitle" :key="index" @click="tiao">
        <img :src="item.model.icon" alt="" />
        <p>{{ item.model.title }}</p>
      </div>
    </div>

    <div class="centent" v-for="(item,index) in remencontent" :key="index" @click="tiaomessage(item.id)">
        <div class="centent-top">
          <img class="im1" :src="item.author.userinfo.avatar" alt="" @click="tiaoauthor(item.author.userinfo.id)">
          <span class="sp1">{{item.author.userinfo.username}} 
             <img class="im3" v-if="item.author.userinfo.vip_status===1" src="../assets/vip.png" alt="">
             <span class="sp2" v-if="item.team_user_count!=0">和其他<span class="sp3">{{item.team_user_count}}
             </span>人</span>
          </span>
          
          <div class="centent-left">
            <span class="sp4" v-if="item.author.userinfo.is_vmovier_migrate_user===false">+关注</span>
          <img class="im2" src="../assets/竖着.png" alt="">
          </div>
         
        </div>
        <div class="centent-text">
          <span>{{item.title}}</span>
        </div>

        <div class="centent-audio">

          <img class="im1" :src="item.cover" alt="">
          <div class="centent-bottom">
              <div class="cang">
                <img src="../assets/星星 .png" alt="">
                <span>{{item.count.count_collect}}</span>
              </div>

              <div class="pinglun">
                <img src="../assets/评论小.png" alt="">
                <span>{{item.count.count_comment}}</span>
              </div>

               <div class="zan">
                <img src="../assets/点赞黑.png" alt="">
                <span>{{item.count.count_like}}</span>
              </div>
          </div>
        </div>
      </div>

  </div>
</template>

<script>

export default {
  
  created(){
    this.getremen()
  },
  data(){
    return{
      text:[],
      bannerlenght:'',
      banner:[],
      rementitle:[],
      remencontent:[],
      current:0
    }
  },
  methods:{
    tiao(){
      this.$router.push({name:'Categorie',query:{index:1,id:31}})
    },
    //跳转视频详情页面
    tiaomessage(id){
      this.$router.push({name:'message',query:{id:id}})
    },
    //跳转用户页面
    tiaoauthor(id){
      this.$router.push({name:'author',query:{id:id}})
    },
      onChange(index) {
      this.current = index;
    },
      //触底的事件
    gun() {
      if (
        this.$refs.gunju.scrollHeight -
          Math.ceil(this.$refs.gunju.scrollTop) ===
        this.$refs.gunju.clientHeight
      ) {
       
        // this.num=this.num+6
        // this.nextnum=this.nextnum+6
        // this.getnextmessage(this.num,this.nextnum)
        this.getremen()
      }
    },

    getremen(){
      this.axios({
        method:'get',
        url:'https://apis.netstart.cn/xpc/home/hot',
        params:{
          
        }
      }).then(result=>{
       
        this.text=result.data.data.children
        for(let i =0;i<this.text.length;i++){
          
          if(this.text[i].type==="uiBanner"){
            this.banner=this.text[i].children
          }
          if(this.text[i].type==="uiFunction"){
             this.rementitle=this.text[i].children
          }
          if(this.text[i].type==="uiBigCard"){
            this.remencontent.push(this.text[i].children[0].model.resource)
          }
        }
        
        this.bannerlenght=this.banner.length;
        
      }).catch(err=>{
      
      })
    }
  }
}
</script>

<style lang="less" scoped>
.remen{
  width: 95%;
  height: calc(100vh - 94px);
  overflow-y: auto;
  padding: 10px;
  background-color: rgb(242, 242, 242);
  .centent{
   width: 100%;
   height: 280px;
   border-radius: 10px;
   margin-top: 10px;
   background-color: white;
    
   .centent-top{
     width: 95%;
     height: 35px;
     display: flex;
     margin-left: 15px;
     line-height: 30px;
     position: relative;
     
     .centent-left{
       position:absolute;
       left: 260px;
     .im2{
       width: 20px;
       height: 25px;
       position: absolute;
       top:3px;
       left: 45px;
     }
      .sp4{
       font-size: 13px;
      
       color: rgb(235,107,99) ;
     }
     }
     .im1{
       width: 30px;
       height: 30px;
       border-radius: 50%;
    
     }
     .im3{
       width: 15px;
       height: 15px;
       position: relative;
       top:2px
     }
    
     .sp1{
       width: 150px;
       font-size: 15px;
       font-weight: bold;
       color: black;
       margin-left: 5px;
        text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
     }
     .sp2{
       font-size: 12px;
       margin-left: 5px;
       margin-top: 2px;
       .sp3{
         font-weight: bold;
       }
     }
    
   }
   .centent-text{
     width: 90%;
     height: 35px;
     line-height: 35px;
    
     margin-left: 15px;
     span{
       font-size: 15px;
       font-weight: bold;
        text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
     }
   }

   .centent-audio{
     width: 100%;
     height: 210px;
    
     
     .im1{
       width: 100%;
       height: 170px;
       
     
     }
     .centent-bottom{
       width: 100%;
       height: 30px;
       margin-top: 10px;
       display: flex;
       justify-content: center;
       .cang{
         width: 33%;
         height: 30px;
         display: flex;
         justify-content: center;
         img{
           width: 15px;
           height: 15px;
         }
        span{
           margin-top: 2px;
           margin-left: 5px;
         }
       }

       .pinglun{
         width: 33%;
         height: 30px;
         display: flex;
          justify-content: center;
         img{
           width: 15px;
           height: 15px;
         }
         span{
           margin-top: 2px;
           margin-left: 5px;
         }
       }

       .zan{
         width: 33%;
         height: 30px;
         display: flex;
          justify-content: center;
         img{
           width: 15px;
           height: 15px;
         }
          span{
           margin-top: 2px;
           margin-left: 5px;
         }
       }
     }
   }
 }
}
.my-swipe {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    img {
      width: 100%;
      height: 200px;
    }
    span {
      position: absolute;
      top: 85%;
      left: 5%;
      font-size: 16px;
      color: white;
    }
  }
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 20px;
  color: white;
  background: rgba(0, 0, 0, 0.1);
  span {
    padding: 3px;
    font-size: 10px;
    color: white;
  }
}
.booktitle {
  width: 100%;
  height: 70px;
  display: flex;
  margin-top: 10px;
    .text {
    width: 100%;
    text-align: center;
    img {
      width: 50px;
      height: 50px;
    }
    p {
      margin-top: 0px;
    }
  }
}
</style>